<template>
  <a-space direction="horizontal" fill style="margin-top: 2px">
    <a-space
      direction="vertical"
      class="card_tools"
      align="center"
      @click="handleAddConnection"
      style="margin-left: 20px"
    >
      <img src="../assets/image/newConnect.svg" width="25px" height="25px" />
      <div style="color: black; font-size: 12px">新建连接</div>
    </a-space>
    <a-space direction="vertical" class="card_tools" align="center" @click="handleToQuery">
      <img src="../assets/image/query.svg" width="25px" height="25px" />
      <div style="color: black; font-size: 12px">新建查询q</div>
    </a-space>
    <a-space direction="vertical" class="card_tools" align="center" @click="handleSubTable">
      <img src="../assets/image/Table.svg" width="25px" height="25px" />
      <div style="color: black; font-size: 12px">普通表查看</div>
    </a-space>
    <a-space direction="vertical" class="card_tools" align="center" @click="handleSubper">
      <img src="../assets/image/Table.svg" width="25px" height="25px" />
      <div style="color: black; font-size: 12px">超级表</div>
    </a-space>
    <a-space direction="vertical" class="card_tools" align="center">
      <img src="../assets/image/jiqun.svg" width="25px" height="25px" />
      <div style="color: black; font-size: 12px">集群查看</div>
    </a-space>
  </a-space>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

const handleToQuery = () => {
  console.log('handleToQuery')
  router.push('/query')
}
</script>
